<template>
<li class="hide-for-small-only">
  <a :title="$t('cmpt.tag.switchLang')">
    <et-icon :name="i18nIcon" />
  </a>
  <ul class="menu vertical">
    <li>
      <a @click="switchLang('cn')">
        <et-icon :name="cnIcon" />
        <span>{{ $t('cmpt.label.chinese') }}</span>
      </a>
    </li>
    <li>
      <a @click="switchLang('en')">
        <et-icon :name="enIcon" />
        <span>{{ $t('cmpt.label.english') }}</span>
      </a>
    </li>
  </ul>
</li>
</template>

<script>
import { EtIcon } from '../../../widgets';

export default {

  components: {
    EtIcon
  },

  props: {
    i18nIcon: {
      type: String,
      default: 'i18n'
    },
    cnIcon: {
      type: String,
      default: 'cn'
    },
    enIcon: {
      type: String,
      default: 'en'
    }
  },

  methods: {
    switchLang(lang) {
      this.$i18n.locale = lang;
      window.localStorage.setItem('language', lang);
      location.reload();
    }
  },

  i18n: {
    messages: {
      en: {
        cmpt: {
          label: {
            english: "English",
            chinese: "中文"
          },
          tag: {
            switchLang: "Switch Language"
          }
        }
      },
      cn: {
        cmpt: {
          label: {
            english: "English",
            chinese: "中文"
          },
          tag: {
            switchLang: "切换语言"
          }
        }
      }
    }
  }

};
</script>
